* {
	margin: 0;
	padding: 0;
}

ul,li {
    margin:0;
    padding:0;
}
li {
	list-style: none;/*取消小圆点*/
}
.top-bar {
	height: 60px;
	background: #293c55;
	margin: 0 auto;
}

.logo {
	width: 60px;
	height: 60px;
	float: left;
	text-align: center;
}

.title {
	font-size: 20px;
	color: white;
	line-height: 60px;
	float: left;
	text-align: center;
}

.user-info {
	line-height: 60px;
	float: right;
}

.user-info span {
	color: white;
	font-size: 14px;
}

a {
	text-decoration: none;
}

.user-info a {
	color: white;
	font-size: 14px;
}



/*.left-nav {
	height: 1200px;
	width: 8%;
	background: rgba(0,0,0,0.4);
	text-align: center;
	float: left;
}

.left-nav a {
	color: white;
}

.index {
	height: 40px;
	color: white;
}

.data-info {
	color: white;
}

.system {
	height: 40px;
	color: white;
}
*/
.middle {
	margin: 0 auto;
    background-image: url(http://jic2.talkingdata.com/observatory/mi/images/bg-container.jpg);;
    background-size: cover;
    height: 1920px;
    /*	width: 1226px;*/
}

.page {
	width: 1700px;
	float: right;
	margin: 0;
}

.device-info {
	height: 100px;
	background: rgba(0,0,0,0.3);
}

.map {
	height: 420px;
	width: 750px;
	padding: 20px;
	background: rgba(0,0,0,0.1);
	float: left;
}

.fracture-meter {
	height: 420px;
	width: 750px;
	padding: 20px;
	float: left;
}

#myMap {
	height: 420px;
	width: 750px;
	margin: 0 auto;
}

#fracture-meter-line {
	height: 420px;
	width: 750px;
	background: rgba(0,0,0,0.1);
/*	background: rgba(255,255,255,1);*/
	margin: 0 auto;
}

.rain-bar {
	height: 420px;
	width: 750px;
	padding: 20px;
	background: rgba(0,0,0,0.1);
	float: left;
}

.tiltmeter {
	height: 420px;
	width: 750px;
	padding: 20px;
	float: left;
}

#tiltmeter {
	height: 420px;
	width: 750px;
	background: rgba(0,0,0,0.1);
	/*background: rgba(255,255,255,1);*/
	margin: 0 auto;
}

.middle>ul {
	width: 180px;
	height: 1000px;
	/*position: absolute;*//*绝对定位*/
	/*left: 0px;
	top:0;*/
	float: left;
	margin: 0;
	background:rgba(0,0,0,0.6);
}

.middle>ul>li {
	width: 180px;
	height: 42px;
	/*border-bottom: 1px solid yellow;*//*边框*/
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 42px;
	list-style: none;/*取消小圆点*/
	list-style-position: outside;
	position: relative;
	/*position: absolute;绝对定位
	left: 0;
	top:0;*/
}

.middle>ul>li>a {
	width: 100%;
	height: 42px;
	display: block;
	text-decoration: none;
}

.middle>ul>li>a span {
	line-height: 42px;
	font-size: 14px;
	color: #3cc;
	float: left;
	text-indent: 29px;/*首行缩进*/
}

.middle>ul>li>a i {
	line-height: 42px;
	font-size: 14px;
	color: #3cc;
	float: right;
	padding-right: 25px;/*右边距*/
}

.middle>ul>li>div {
	height: 500px;
	width: 150px;
	background: rgba(0,0,0,0.6);
	position:absolute;
	left: 180px;
	top:0;
	display:none;
	z-index:9999;   /*防止被遮挡*/
}

.middle>ul>li:hover{
	background-color: rgba(0,0,0,0.8);
}
.middle>ul>li:hover .middle>ul>li>a {
	color: #fff;
}

.middle>ul>li:hover>div {
	display: block;
}
.middle>ul>li>div>ul{
	height: 500px;
	width: 150px;
}

.middle>ul>li>div>ul>li{
	height: 50px;
	width: 150px;
}

.middle>ul>li>div>ul>li>a{
	color: #3CC;
}

.middle>ul>li>div>ul>li:hover {
	background-color: rgba(0,0,0,0.8);
	font-color: #ccc;
}

.middle>ul>li>div>ul>li:hover a {
	color: #fff;
}

/*系统管理部分*/

